<template>
    <div class="watsons">
        <header>
            <img src="../../../static/img/watsons/watsons_logo .png" alt="">
        </header>
        <div class="bottle">
            <img src="http://file.rzkeji.com/web/f6_activity/bottle.png" alt="">
        </div>
        <div class='desc'>
            <div class="desc_left">
                <div>特别提醒</div>
                <div class="desc_left_img">
                    <img src="http://file.rzkeji.com/web/f6_activity/watsons/watsons_b1.png" alt="">
                    <img src="http://file.rzkeji.com/web/f6_activity/watsons/watsons_b1.png" alt="">
                </div>
            </div>
            <div class="desc_right">
                购买后揭开瓶身后标签<br/>扫描二维码<br/> 进入页面连续打卡分享6天<br/> 免费再送6瓶
            </div>
        </div>
        <div class="logo">
            <img src="../../../static/img/watsons/watsons_logo2.png" alt="">
        </div>
        <div class="btn">
           <router-link :to="{name:'share'}" tag="div" replace>
               <div>限时特惠</div>
               <div>买6<br/>送6</div>
               </router-link>
           <!-- <div>打卡签到</div> -->
       </div>
    </div>
</template>
<script>
export default {
    name:'watsons'
}
</script>
<style lang="scss" scoped>
@import '../../common/css/index.scss';
    .watsons{
        width: 100%;
        height: 100%;
        background:url('http://file.rzkeji.com/web/f6_activity/bg1.jpg');
        background-size: 100%;
    }
    header{
        & img{
            margin:30px 0 0 0;
            width: 360px;
        }
    }
    .bottle{
        margin-top:50px;
        width: 100%;
        & img{
            width: 35%;
        }
    }
    .desc{
        margin-left: 20px;
        margin-top:40px;
        display: flex;
        justify-content: space-around;
        & .desc_left{
            display: flex;
            width:40%;
            justify-content:space-around;
            flex-wrap: wrap;
            div{
                width: 100%;
                &:nth-child(1){
                    width: 100%;
                    font-family: 'SimSun';
                    background-color:rgba(250, 235, 243,0.6);
                    font-size: 30px;
                }
            }
            .desc_left_img{
                margin-top:10px;
                display: flex;
                justify-content: space-between;
            }
            img{
                width: 140px;
                height: 140px;
            }
        }
        & .desc_right{
            flex: 1;
            font-family: 'HYYaKuHeiW';
            margin-left: 20px;
            text-align: left;
            font-size: 30px;
        }
    }
    .logo{
        margin-top:20px;
        img{
            width: 120px;
        }
    }
    .btn{
        position: relative;
        margin-top:-30px;
        &>div{
            background: url('../../../static/img/watsons/watsons_btn.png');
            background-size:100% 100%;
            line-height: 60px;
            div:nth-child(1){
                font-size: 25px;
                padding-top:10px;
            }
        }
    }
</style>
